<template>
	<view class="feedback-container">
		<!-- 顶部标题和副标题 -->
		<view class="header-card">
			<image class="header-bg" src="https://yjgs.jsonbug.com/test/de12d4f8b1679ecccc5e78e4f1440841.png"
				mode="aspectFill"></image>
			<view class="header-content">
				<view class="header-title c-333">{{greeting}}！贵商朋友</view>
				<view class="header-desc c-666">
					{{headerDesc}}
				</view>
			</view>
			<view class="stats-row">
				<view class="stat-item">
					<text class="stat-num">{{stats.successCount}}</text>
					<text class="stat-label">成功合作</text>
				</view>
				<view class="stat-item">
					<text class="stat-num">{{stats.totalMoney}}</text>
					<text class="stat-label">总交易额</text>
				</view>
				<view class="stat-item">
					<text class="stat-num">{{stats.satisfaction}}</text>
					<text class="stat-label">满意度</text>
				</view>
			</view>
		</view>

		<!-- 卡片列表 -->
		<view class="card-title">
			<view class="title-line"></view>
			<text>成功案例</text>
			<view class="title-line"></view>
		</view>

		<!-- 加载中状态 -->
		<view class="loading-container" v-if="firstLoading">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 加载失败状态 -->
		<view class="empty-container" v-else-if="loadError">
			<image class="empty-image" src="/static/images/empty-box.png" mode="aspectFit"></image>
			<text class="empty-text">加载失败，请稍后再试</text>
			<view class="retry-btn" @click="onRefresh">重新加载</view>
		</view>

		<!-- 空数据状态 -->
		<view class="empty-container" v-else-if="cardList.length === 0 && !loading">
			<image class="empty-image" src="/static/images/empty-box.png" mode="aspectFit"></image>
			<text class="empty-text">暂无成功案例</text>
			<view class="empty-desc">成为第一个分享成功案例的人吧</view>
			<view class="retry-btn" @click="toPage('编写寄语')">去分享</view>
		</view>

		<!-- 卡片列表 -->
		<view class="card-list" v-else>
			<view class="feedback-card" v-for="(item, idx) in cardList" :key="idx" @click="viewDetail(item)">
				<image class="card-img" :src="item.img" mode="aspectFill" />
				<view class="card-header flex-row items-center justify-between">
					<view class="card-tag" :class="item.typeClass">{{item.type}}</view>
					<view class="card-date">{{item.date}}</view>
				</view>
				<view class="card-content">
					<view class="card-user-company">
						<text class="card-user">{{item.user}}</text>
						<text class="card-company">{{item.company}}</text>
					</view>
					<view class="card-desc mt-10">{{item.desc}}</view>
				</view>
				<view class="card-footer flex-row items-center justify-between">
					<view class="card-money" v-if="item.rawData.money && item.rawData.money > 0"><text
							class="money-icon">¥</text><text class="money-num">
							预估{{item.money}}</text></view>
					<view v-else></view>
					<view class="card-link">查看详情</view>
				</view>
			</view>
		</view>

		<!-- 底部加载状态 -->
		<view class="bottom-loading" v-if="cardList.length > 0">
			<text v-if="loading" class="bottom-loading-text">加载中...</text>
			<text v-else-if="finished" class="bottom-loading-text">没有更多了</text>
			<text v-else class="bottom-loading-text">上拉加载更多</text>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view @click="toPage('编写寄语')" class="bar-btn publish-btn">
				<text class="iconfont icon-bianji1"></text>
				<text>分享收获</text>
			</view>
			<view @click="toPage('我的寄语')" class="bar-btn view-btn">
				<text class="iconfont icon-gerenzhongxin1"></text>
				<text>我的寄语</text>
			</view>
			<view @click="toPage('加入贵商')" class="bar-btn join-btn">
				<text class="iconfont icon-huangguan"></text>
				<text>加入贵商</text>
			</view>
		</view>

		<view style="height: 220rpx;"></view>

	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		configMap
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import {
		PlatformFeedBackGetList,
	} from "@/api/extend.js"
	export default {
		computed: configMap({}, mapGetters(['isLogin', 'uid', 'userInfo'])),
		data() {
			return {
				greeting: '',
				pageConfig: {
					page: 1,
					limit: 10
				},
				headerDesc: '汇聚精彩，共创价值。探索贵商平台带来的收益与商机，一起把握2025年的财富机遇。',
				stats: {
					successCount: '',
					totalMoney: '',
					satisfaction: ''
				},
				cardList: [],
				loading: false,
				finished: false,
				firstLoading: true,
				loadError: false
			};
		},

		mounted() {
			this.getGreeting()
			this.getCardList()
		},
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				title: '贵商寄语',
				imageUrl: '',
				path: '/pages/extend/index/index_feedback?uid=' + (that.uid || -1)
			};
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: '贵商寄语',
				query: {
					uid: this.uid || -1
				},
				imageUrl: ''
			};
		},
		// #endif
		methods: {
			getGreeting() {
				const hour = new Date().getHours()
				if (hour >= 5 && hour < 12) {
					this.greeting = '早上好'
				} else if (hour >= 12 && hour < 14) {
					this.greeting = '中午好'
				} else if (hour >= 14 && hour < 18) {
					this.greeting = '下午好'
				} else {
					this.greeting = '晚上好'
				}
			},
			// 获取卡片列表数据
			getCardList() {
				if (this.loading || this.finished) return
				this.loading = true
				this.loadError = false

				PlatformFeedBackGetList({
					page: this.pageConfig.page,
					limit: this.pageConfig.limit
				}).then(res => {
					if (res.status == 200) {
						const listData = res.data.data || []

						// 更新头部描述文字
						if (res.data.text) {
							this.headerDesc = res.data.text
						}

						// 更新统计数据
						if (res.data.money) {
							this.stats.totalMoney = this.formatMoney(res.data.money)
						} else {
							this.stats.totalMoney = '暂无数据'
						}

						if (res.data.successCount) {
							this.stats.successCount = res.data.successCount
						} else {
							this.stats.successCount = '暂无数据'
						}

						if (res.data.satisfied) {
							this.stats.satisfaction = res.data.satisfied
						} else {
							this.stats.satisfaction = '暂无数据'
						}

						// 处理卡片列表数据
						const newList = listData.map(item => {
							// 处理图片，取第一张图片作为卡片图片
							let imgArr = []
							if (item.images && item.images.length > 0) {
								imgArr = item.images.split(',')
							}

							// 获取卡片样式类
							let typeClass = 'card-tag-blue'
							if (item.type == 1) {
								typeClass = 'card-tag-blue'
							} else if (item.type == 2) {
								typeClass = 'card-tag-red'
							} else if (item.type == 3) {
								typeClass = 'card-tag-green'
							} else if (item.type == 4) {
								typeClass = 'card-tag-orange'
							}

							// 格式化日期
							const dateStr = item.create_time ? item.create_time.substring(0, 10).replace(
								/-/g, '/') : ''

							return {
								id: item.id,
								type: this.getTypeName(item.type),
								typeClass: typeClass,
								date: dateStr,
								img: imgArr[0] ||
									'https://yjgs.jsonbug.com/test/de12d4f8b1679ecccc5e78e4f1440841.png',
								user: item.card && item.card.name ? item.card.name : '',
								company: item.card && item.card.position && item.card.position
									.company_name ? item.card.position.company_name : '',
								desc: item.content || '',
								money: item.money && item.money > 0 ? this.formatMoney(item.money) : '',
								rawData: item
							}
						})

						// 追加数据到列表
						if (this.pageConfig.page === 1) {
							this.cardList = newList
						} else {
							this.cardList = [...this.cardList, ...newList]
						}

						// 判断是否加载完毕
						if (listData.length < this.pageConfig.limit || this.pageConfig.page >= res.data
							.last_page) {
							this.finished = true
						} else {
							this.pageConfig.page++
						}
					} else {
						this.loadError = true
						uni.showToast({
							title: res.message || '获取数据失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					this.loadError = true
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				}).finally(() => {
					this.loading = false
					this.firstLoading = false
					uni.stopPullDownRefresh()
				})
			},
			// 刷新数据
			onRefresh() {
				this.pageConfig.page = 1
				this.finished = false
				this.loadError = false
				this.getCardList()
			},
			toPage(name) {

				if (name == '加入贵商') {
					uni.navigateTo({
						url: '/pages/extend/user_vip/user_vip'
					})
					return
				}

				if (!this.isLogin) {
					toLogin();
					return;
				}

				if (name == '编写寄语') {
					uni.navigateTo({
						url: '/pages/extend/index/index_feedback_send'
					})
					return
				}

				if (name == '我的寄语') {
					uni.navigateTo({
						url: '/pages/extend/index/index_feedback_list'
					})
					return
				}


			},
			viewDetail(item) {
				uni.setStorageSync('feedback_detail', JSON.stringify(item.rawData))
				uni.navigateTo({
					url: '/pages/extend/index/index_feedback_desc?id=' + item.id
				})
			},
			getTypeName(type) {
				switch (type) {
					case 1:
						return '沙龙感想';
					case 2:
						return '贵商反馈';
					case 3:
						return '贵商寄语';
					default:
						return '未知类型';
				}
			},
			// 格式化金额
			formatMoney(money) {
				if (!money || isNaN(parseFloat(money))) return '';
				money = parseFloat(money);

				if (money <= 0) return '';

				if (money < 1000) {
					return money + '元';
				} else if (money < 10000) {
					return (money / 1000).toFixed(1).replace('.0', '') + '千';
				} else if (money < 100000) {
					return (money / 10000).toFixed(1).replace('.0', '') + '万';
				} else if (money < 1000000) {
					return (money / 10000).toFixed(0) + '万';
				} else if (money < 10000000) {
					return (money / 10000).toFixed(0) + '万';
				} else if (money < 100000000) {
					return (money / 10000).toFixed(0) + '万';
				} else {
					return (money / 100000000).toFixed(1).replace('.0', '') + '亿';
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.onRefresh()
		},
		// 上拉加载更多
		onReachBottom() {
			if (!this.finished && !this.loading && !this.loadError) {
				this.getCardList()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.feedback-container {
		background: #f9fbfd;
		min-height: 100vh;
		padding: 32rpx 24rpx 24rpx 24rpx;
	}

	.header-card {
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 32rpx 0 rgba(0, 0, 0, 0.06);
		overflow: hidden;
		position: relative;
		margin-bottom: 40rpx;
	}

	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 180rpx;
		opacity: 0.8;
		z-index: 0;
	}

	.header-content {
		position: relative;
		z-index: 1;
		padding: 30rpx 32rpx 20rpx 32rpx;
		// background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
	}

	.header-title {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.header-desc {
		font-size: 26rpx;
		line-height: 1.6;
		max-width: 90%;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.stats-row {
		display: flex;
		justify-content: space-around;
		background: #fff;
		padding: 24rpx 20rpx;
		position: relative;
		z-index: 1;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-num {
		font-size: 34rpx;
		font-weight: bold;
		color: #ff6b45;
		margin-bottom: 4rpx;
	}

	.stat-label {
		font-size: 22rpx;
		color: #666;
	}

	.card-title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 12rpx 0 24rpx;
	}

	.card-title text {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin: 0 20rpx;
	}

	.title-line {
		height: 2rpx;
		background: #e0e0e0;
		width: 80rpx;
	}

	.card-list {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		justify-content: space-between;
	}

	.feedback-card {
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 32rpx 0 rgba(0, 0, 0, 0.04);
		width: 48%;
		margin-bottom: 8rpx;
		padding: 0 0 20rpx 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.feedback-card:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, 0.04);
	}

	.card-img {
		width: 100%;
		height: 200rpx;
		object-fit: cover;
	}

	.card-header {
		padding: 16rpx 20rpx 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.card-tag {
		font-size: 22rpx;
		font-weight: 600;
		border-radius: 20rpx;
		padding: 4rpx 16rpx;
		color: #fff;
	}

	.card-tag-blue {
		background: linear-gradient(90deg, #4e7fff 0%, #7db1ff 100%);
	}

	.card-tag-red {
		background: linear-gradient(90deg, #ff4e4e 0%, #ff7e7e 100%);
	}

	.card-tag-green {
		background: linear-gradient(90deg, #1ecb8b 0%, #7ee6b8 100%);
	}

	.card-tag-orange {
		background: linear-gradient(90deg, #ff8c00 0%, #ffb74d 100%);
	}

	.card-date {
		font-size: 20rpx;
		color: #999;
	}

	.card-content {
		padding: 10rpx 20rpx 0 20rpx;
	}

	.card-user-company {
		display: flex;
		align-items: center;
		width: 100%;
		overflow: hidden;
	}

	.card-user {
		font-size: 26rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 0;
		margin-right: 12rpx;
		max-width: 40%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.card-company {
		font-size: 22rpx;
		color: #666;
		margin-bottom: 0;
		max-width: 60%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.card-desc {
		font-size: 24rpx;
		color: #444;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 72rpx;
	}

	.card-footer {
		padding: 16rpx 20rpx 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: auto;
	}

	.card-money {
		font-size: 22rpx;
		color: #ff4e4e;
		font-weight: 500;
		display: flex;
		align-items: center;
	}

	.money-icon {
		font-size: 22rpx;
		color: #ff4e4e;
		font-weight: bold;
		margin-right: 2rpx;
	}

	.money-num {
		font-size: 28rpx;
		color: #ff4e4e;
		font-weight: bold;
	}

	.card-link {
		font-size: 22rpx;
		color: #4e7fff;
		border-radius: 30rpx;
		padding: 8rpx 16rpx;
		background: rgba(78, 127, 255, 0.1);
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.items-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10px);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 16rpx 0 calc(24rpx + env(safe-area-inset-bottom)) 0;
		z-index: 99;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.bar-btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		border-radius: 40rpx;
		padding: 0 32rpx;
		height: 70rpx;
		min-width: 180rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.1);
		margin: 0 16rpx;
		white-space: nowrap;
		transition: transform 0.2s;
	}

	.bar-btn:active {
		transform: scale(0.96);
	}

	.publish-btn {
		background: linear-gradient(90deg, #4e7fff 0%, #7db1ff 100%);
		color: #fff;
	}

	.view-btn {
		background: #f0f6ff;
		color: #4e7fff;
		border: 1rpx solid rgba(78, 127, 255, 0.3);
	}

	.join-btn {
		background: linear-gradient(90deg, #ff8c00 0%, #ffb74d 100%);
		color: #fff;
	}

	.iconfont {
		font-size: 32rpx;
		margin-right: 8rpx;
		margin-bottom: 0;
	}

	/* 加载中状态样式 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}

	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #f3f3f3;
		border-top: 4rpx solid #4e7fff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 20rpx;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading-text {
		font-size: 28rpx;
		color: #666;
	}

	/* 空数据和错误状态样式 */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.empty-desc {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

	.retry-btn {
		background: #4e7fff;
		color: #fff;
		font-size: 28rpx;
		padding: 12rpx 40rpx;
		border-radius: 40rpx;
		margin-top: 20rpx;
	}

	/* 底部加载状态 */
	.bottom-loading {
		text-align: center;
		padding: 30rpx 0;
	}

	.bottom-loading-text {
		font-size: 24rpx;
		color: #999;
	}
</style>